<template>
    <div class="cont">
        <van-popup v-model="show" position="bottom" close-on-popstate round @close="close" closeable>
            <div class="p-20 content">
                <div class="text-center font-16 text-bold m-b-5">{{ type == 1 ? '选择要屏蔽的标签组' : type == 2 ? '全部屏蔽标签组'
                    : '全部屏蔽关键词' }}</div>
                <div class="text-center font-12 color-9 p-b-15" v-if="type == 1">
                    <div>打开微信>通讯录>标签>新建标签，然后添加好友即可</div>
                    <div class="color-red">① 若未同步到标签，点击刷新同步后1分钟后再查看</div>
                    <div class="color-red">② 若标签组成员有变动，需手动点击同步刷新才生效</div>
                </div>
                <div class="list van-hairline--top p-t-20" v-if="blockList && blockList.length > 0">
                    <span class="m-r-10 m-b-10" v-for="(item, index) in blockList" :key="item.id"
                        @click="slectKeyword(item)">
                        <van-tag class="p-tb-5 p-lr-8 m-b-10" color="#f6f7f8" text-color="#333333" :closeable="type != 1 ? true : false"
                            @close="delKeyword(item)"> {{ item.labelName || item
                            }}<van-icon v-if="type == 1" name="plus" /></van-tag>
                    </span>
                </div>
                <noData v-else marginTop="50px" :text="`暂无${type == 3 ? '屏蔽关键词' : '屏蔽标签组'}`" />
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup, Tag, Dialog } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Tag.name]: Tag,
        [Dialog.name]: Dialog
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: [Number, String],
            default: 1
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    computed: {
        blockList: {
            get () {
                let arr = this.$common.deepClone(this.list)
                if (this.type == 1 && this.list && this.list.length > 0) {
                    arr.filter(item => !item.isChecked)
                }
                return arr
            },
            set (newValue) {
            }
        }
    },
    data () {
        return {
            show: this.popupVisible
        }
    },
    created () {

    },
    methods: {

        close () {
            this.$emit('close')
        },
        slectKeyword (item) {
            if (this.type == 1) {
                item.type = 'add'
                this.$emit('ok', item)
            }
        },
        // 删除
        delKeyword (item) {
            Dialog.confirm({
                title: '温馨提示',
                message: `确定要移除该${this.type == 2 ? '标签组' : '关键词'}【${item.labelName || item}】吗？`
            })
                .then(() => {
                    let obj = {}
                    if (this.type == 2) {
                        obj = {
                            ...item,
                            type: 'del'
                        }
                    } else {
                        obj = {
                            labelName: item,
                            type: 'del'
                        }
                    }

                    this.$emit('ok', obj)
                })
                .catch(() => {
                    // on cancel
                })
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    .list {
        height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }

}
</style>